import React, { useState, useEffect } from 'react'
import { Tabbar } from 'react-vant';
import { Card, WapHome, Bell, Manager, Chat } from '@react-vant/icons'
import { useNavigate, Outlet } from 'react-router-dom'

export default function App() {
  const navigate = useNavigate()
  let change = (index) => {
    if (index === 0) {
      navigate('/app/home')
    } else if (index === 1) {
      navigate('/app/type')
    } else if (index === 2) {
      navigate('/app/piao')
    } else if (index === 3) {
      navigate('/app/message')
    } else if (index === 4) {
      navigate('/app/my')
    }
  }

  useEffect(() => {
    sessionStorage.setItem('token', '1321231')
    const obj = {
      username: 'Daisy',
      password: '123456',
      avatar: '.././1.png',
      nickname: 'Daisy',
      gender: '男',
      intro: '你好 我是石永来',
    }
    sessionStorage.setItem('user', JSON.stringify(obj))
  })
  return (
    <div >
      <Outlet></Outlet>
      <div className='demo-tabbar'>
        <Tabbar onChange={(index) => { change(index) }}>
          <Tabbar.Item icon={<WapHome />}></Tabbar.Item>
          <Tabbar.Item icon={<Bell />}></Tabbar.Item>
          <Tabbar.Item icon={<Card />}></Tabbar.Item>
          <Tabbar.Item icon={<Chat />}></Tabbar.Item>
          <Tabbar.Item icon={<Manager />}></Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  )
}

